<template>
  <div class="mainsss">
    <a-row type="flex" class="table-title">
      <a-col
        :span="5"
        class="textOverflow"
        style="text-align: left; padding-left: 70px"
      >
        平台编码
      </a-col>
      <a-col :span="4" class="textOverflow"> 品质品牌 </a-col>
      <a-col :span="5" class="textOverflow"> 价格（含税/含运费） </a-col>
      <a-col :span="3" class="textOverflow"> 施工费 </a-col>
      <a-col :span="5" class="textOverflow"> 价格有效期 </a-col>
      <a-col :span="2" class="textOverflow"> 操作 </a-col>
    </a-row>
    <div class="tableInfo">
        <div class="top">
          <div class="left">
            <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div>
            <div class="img">
              <img src="../../../../assets/image/buyer/message.png" alt="">
            </div>
            <div class="add">上海市宝山区</div>
          </div>
          <div class="right">
            <div class="price">
              <span class="Ch">已报价： </span>
              <span class="Nu">3/5</span>
            </div>
            <div class="total">
              <span class="Ch">报价合计： </span>
              <span class="Nu">￥550:00</span>
            </div>
          </div>
          <div class="rightImg">
            <img src="../../../../assets/image/buyer/zhiding.png" alt="" />
          </div>
          <div class="imgText">指定</div>
        </div>
        <div class="everyTable">
           <div class="everyTable">
        <div class="tablesInfo">
             <div class="indexs">
           <div class="left">
             <div class="index">1</div>
          <div class="names">燃油滤清器</div>
          <div class="code">
            <span class="codeText">寻源编码: </span>
            <span>ZXBDSJFBS7868878</span>
          </div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
          <div class="quality">
            <span class="codeText">品质要求: </span>
            <span>原厂/品牌</span>
          </div>
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
            <a href="">查看</a>
          </div>
        </div>
          <div class="everyTableInfo">
          <div class="codes">
           <span>SD00343242</span>
           <div class="codeImg">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
          <div class="brand">
            <div class="brandInfo">
             <div class="brandLeft">
              品牌
          </div>
          <div class="brandRight">
             博士
          </div>
            </div>
          </div>
          <div class="rate">
            <span class="rateNum"> 199.99</span>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
          </div>
          <div class="Construction">
             50.00
          </div>
          <div class="validity">
            2021/02/30
          </div>
          <div class="operation">
            <img src="../../../../assets/image/buyer/viewInfo.png" alt="">
            <span>备注图片</span>
          </div>
        </div>
        </div>
     
      </div>
      </div>
       
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang='less' >
html,
body {
  width: 100%;
}
.mainsss{
  width: 100%;
  height: 100%;
    background-color: rgb(237, 239, 243);
}
.table-title {
  width: 100%;
  margin-top: 10px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 500;
background-color: rgb(248, 249, 250);
  .textOverflow {
    font-weight: bold;
  }
}
.tableInfo {
  width: 98%;
  height: calc(100vh - 200px);
  margin: auto;
 padding-bottom: 20px;
     margin-top: 8px;
     .top {
      width: 100%;
      height: 48px;
      display: flex;
      justify-content: space-between;
      position: relative;
       background-color: white;
      .left {
        width: 70%;
        display: flex;
        align-items: center;
        .name {
          line-height: 48px;
          font-size: 14px;
          font-weight: bold;
        }
        .zhiding {
          margin-left: 4px;
          width: 33px;
          height: 18px;
          border: 1px solid blue;
          color: blue;
          text-align: center;
          line-height: 18px;
          font-size: 12px;
        }
           .img{
          margin-left: 8px;
        }
        .add {
          margin-left: 15px;
          width: 73px;
          height: 14px;
          list-style: 48px;
          font-size: 12px;
          font-weight: bold;
        }
      }
      .right {
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        .Ch {
          color: rgb(162, 167, 175);
        }
        .price {
          width: 35%;
          font-size: 12px;
          border-right: 1px solid gray;
        }
        .total {
          margin-left: 16px;
        }
      }
      .rightImg {
        width: 70px;
        height: 60px;
        position: absolute;
        right: 0px;
        top: 30%;
        margin-top: -26px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .imgText {
        width: 70px;
        height: 60px;
        color: white;
        position: absolute;
        right: -25px;
        top: 20%;
        z-index: 100;
        font-size: 15px;
      }
    }
  .everyTable {
    width: 100%;
    background-color: white;
 

    .tablesInfo{
         width: 100%;
          display: flex;
         flex-direction: column;
         background-color: white;
             .indexs {
         width: 100%;
         margin: auto;
          height: 48px;
          background-color: rgb(248, 249, 250);
      display: flex;
      .left{
         width: 90%;
      height: 100%;
      display: flex;
      align-items: center;
      }
      .codeText {
        color: rgb(165, 171, 178);
      }
      .index {
        margin-left: 16px;
        width: 20px;
        height: 20px;
        border: 1px dashed black;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
      }
      .names {
        font-weight: bold;
        margin-left: 16px;
      }
      .code {
        height: 15px;
        line-height: 15px;
        width: 220px;
        margin-left: 20px;
        border-right: 1px solid black;
      }
      .number {
        width: 100px;
        height: 15px;
        line-height: 15px;
        margin-left: 16px;
        border-right: 1px solid black;
      }
      .quality {
        margin-left: 15px;
      }
      .additional{
        align-self: center;
          width: 10%;
          margin-right: 16px;
          a{
            color: blue;
          }
      }
    }
    }
    
    .everyTableInfo{
      width: 100%;
      height: 64px;
      border-bottom: 1px solid  rgb(248, 249, 250);
      display: flex;
      align-items: center;
      .codes{
        width: 18%;
        font-size: 12px;
        color: rgb(116, 124, 136);
        margin-left: 16px;
        display: flex;
        .codeImg{
          margin-left: 8px;
          width: 16px;
          height: 16px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .brand{
        width: 17%;
        .brandInfo{
          width: 80px;
           display: flex;
           height: 20px;
           align-items: center;
           justify-content: space-between;
           .brandLeft{
             width: 50%;
               height: 12px;
               line-height: 12px;
             border-right: 2px solid rgb(116, 124, 136);
           }

           .brandRight{
             width: 32px;
           }
        }
      }
      .rate{
        width: 23%;
        display: flex;
        align-items: center;
        .rateNum{
          font-size: 16px;
          font-weight: bold;
        }
        .rateImg{
          width: 16px;
          height: 16px;
          margin-left: 5px;
          border: 1px dashed rgb(116, 124, 136);
        }
        img{
          width: 90%;
          height: 90%;
         margin-bottom: 6px;
         margin-left: 1px;

        }
        .rateText{
          margin-left: 11px;
          width: 70px;
          display: flex;
          justify-content: space-between;
          border: 1px solid rgb(239, 241, 244);
          .SL{
            width: 50%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border-right: 1px solid  rgb(239, 241, 244);
             color: rgb(116, 124, 136);
          }
          .percentage{
            font-weight: bold;
          }
        }
      }
      .Construction{
        width: 12%;
        font-size: 14px;
        font-weight: bold;
      }
      .validity{
        width: 18%;
        font-size: 12px;
           color: rgb(116, 124, 136);
      }
      .operation{
        cursor: pointer;
      }
    }
  }
}
</style>